<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style type="text/css">
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div style="width: 50%;margin: 0 auto;">
    <h3>form表单</h3>
    <form action="" method="POST">
        <p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
        <p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
        <p>性别：
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="2">女
        </p>
        <p>出生日期
            <input type="date" name="birthday">
        </p>
        <p>爱好：
            <input type="checkbox" name="hobby" value="1">篮球
            <input type="checkbox" name="hobby" value="2">写文章
            <input type="checkbox" name="hobby" value="3">计算机
        </p>
        <p>上传头像：
            <input type="file" name="image">
        </p>
        <p>籍贯：
            <select>
                <optgroup label="山西">
                <option value="1">太原</option>
                <option value="2">晋城</option>
                <option value="3">大同</option>
                <option value="4">忻州</option>
                <option value="5">临汾</option>
                <optgroup label="河南">
                <option value="1">郑州</option>
                <option value="2">开封</option>
                <option value="3">洛阳</option>
            </select>
        </p>
        <p>个人描述：
            <textarea name="desc" cols="30" rows="10"></textarea>
        </p>
        <input type="hidden" name="hid" value="10000">
        <input type="submit" value="提交" class="btn" style="background-color: #337ab7; color: white;">
        <input type="reset" value="重置" class="btn" style="background-color: #398439; color: #fff;">
        <input type="button" value="按钮" class="btn">
    </form>
</div>
</body>
</html>